<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Tutorial Demo</title>
    <style>
        /* 提示框的样式 */
        .g6-tooltip {
            border: 1px solid #e2e2e2;
            border-radius: 4px;
            font-size: 12px;
            color: #545454;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 10px 8px;
            box-shadow: rgb(174, 174, 174) 0px 0px 10px;
        }
    </style>
</head>

<body>
    <div id="mountNode"></div>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
    <!-- 4.x and later versions -->
    <!-- <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script> -->
    <script>
        // 实例化 minimap 插件
        const minimap = new G6.Minimap({
            size: [100, 100],
            className: 'minimap',
            type: 'delegate',
        });
        // 实例化 Image Minimap 插件
        const imageMinimap = new G6.ImageMinimap({
            width: 200,
            graphImg: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ'
        });
        // 实例化 grid 插件
        const grid = new G6.Grid();

        //G6
        const graph = new G6.Graph({
            container: 'mountNode',
            plugins: [minimap, grid], // 将 minimap 实例配置到图上
            animate: true, // Boolean，可选，全局变化时否使用动画过渡
            width: 800,
            height: 600,
            animate: true, // Boolean，切换布局时是否使用动画过度，默认为 false
            animateCfg: {
                duration: 500, // Number，一次动画的时长
                easing: 'linearEasing', // String，动画函数
            },
            // 节点默认配置
            defaultNode: {
                labelCfg: {
                    style: {
                        fill: '#fff',
                    },
                },
            },
            // 边默认配置
            defaultEdge: {
                labelCfg: {
                    autoRotate: true,
                },
            },
            // 节点在各状态下的样式
            nodeStateStyles: {
                // hover 状态为 true 时的样式
                hover: {
                    fill: 'lightsteelblue',
                },
                // click 状态为 true 时的样式
                click: {
                    stroke: '#000',
                    lineWidth: 3,
                },
            },
            // 边在各状态下的样式
            edgeStateStyles: {
                // click 状态为 true 时的样式
                click: {
                    stroke: 'steelblue',
                },
            },
            // 布局
            layout: {
                type: 'force',
                linkDistance: 100,
                preventOverlap: true,
                nodeStrength: -30,
                edgeStrength: 0.1,
            },
            // 内置交互
            modes: {
                default: ['drag-canvas', 'zoom-canvas', 'drag-node', {
                    type: 'tooltip', // 提示框
                    formatText(model) {
                        // 提示框文本内容
                        const text = 'label: ' + model.label + '<br/> class: ' + model.class;
                        return text;
                    },
                }, {
                        type: 'edge-tooltip', // 边提示框
                        formatText(model) {
                            // 边提示框文本内容
                            const text =
                                'source: ' +
                                model.source +
                                '<br/> target: ' +
                                model.target +
                                '<br/> weight: ' +
                                model.weight;
                            return text;
                        },
                    },
                ]
            },
        });

        const main = async () => {
            const response = await fetch(
                'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
            );
            const remoteData = await response.json();
            const data = {
                nodes: [
                    {
                    id: 'peer0.org1',
                    x: 600,
                    y: 100,
                    type: 'background-animate',
                    color: '#40a9ff',
                    size: 80,
                    label: 'peer0.org1',
                    labelCfg: {
                        position: 'center',
                        offset: 10,
                    },
                    },
                    {
                    id: 'peer0.org2',
                    x: 600,
                    y: 300,
                    type: 'background-animate',
                    color: '#40a9ff',
                    size: 80,
                    label: 'peer0.org2',
                    labelCfg: {
                        position: 'center',
                        offset: 10,
                    },
                    },
                    {
                    id: 'cli',
                    x: 200,
                    y: 200,
                    type: 'background-animate',
                    color: '#40a9ff',
                    size: 80,
                    label: 'cli',
                    labelCfg: {
                        position: 'center',
                        offset: 10,
                    },
                    },
                    {
                    id: 'order',
                    x: 400,
                    y: 400,
                    type: 'background-animate',
                    color: '#40a9ff',
                    size: 80,
                    label: 'order',
                    labelCfg: {
                        position: 'center',
                        offset: 10,
                    },
                    },
                ],
                edges: [
                    {
                    id: 'cli-peer0org1',
                    source: 'cli',
                    target: 'peer0.org1',
                    },
                    {
                    id: 'cli-peer0org2',
                    source: 'cli',
                    target: 'peer0.org2',
                    },
                    {
                    id: 'peer0.org1-cli',
                    source: 'peer0.org1',
                    target: 'cli',
                    },
                    {
                    id: 'peer0org2-cli',
                    source: 'peer0.org2',
                    target: 'cli',
                    },
                    {
                    id: 'cli-order',
                    source: 'cli',
                    target: 'order',
                    },
                    {
                    id: 'order-peer0org1',
                    source: 'order',
                    target: 'peer0.org1',
                    },
                    {
                    id: 'order-peer0org2',
                    source: 'order',
                    target: 'peer0.org2',
                    },
                ],
            };

        

            graph.data(data);
            graph.render();

            // 监听鼠标进入节点
            graph.on('node:mouseenter', (e) => {
                const nodeItem = e.item;
                // 设置目标节点的 hover 状态 为 true
                graph.setItemState(nodeItem, 'hover', true);
            });
            // 监听鼠标离开节点
            graph.on('node:mouseleave', (e) => {
                const nodeItem = e.item;
                // 设置目标节点的 hover 状态 false
                graph.setItemState(nodeItem, 'hover', false);
            });
            // 监听鼠标点击节点
            graph.on('node:click', (e) => {
                // 先将所有当前有 click 状态的节点的 click 状态置为 false
                const clickNodes = graph.findAllByState('node', 'click');
                clickNodes.forEach((cn) => {
                    graph.setItemState(cn, 'click', false);
                });
                const nodeItem = e.item;
                // 设置目标节点的 click 状态 为 true
                graph.setItemState(nodeItem, 'click', true);
            });
            // 监听鼠标点击节点
            graph.on('edge:click', (e) => {
                // 先将所有当前有 click 状态的边的 click 状态置为 false
                const clickEdges = graph.findAllByState('edge', 'click');
                clickEdges.forEach((ce) => {
                    graph.setItemState(ce, 'click', false);
                });
                const edgeItem = e.item;
                // 设置目标边的 click 状态 为 true
                graph.setItemState(edgeItem, 'click', true);
            });
        };
        main();
    </script>
</body>

</html>